h1{font-family: Bitcount Single, cursive; font-size: 60px;text-align: center;color: brown;background-color: darkorange;}
 h1 {
      font-size: 50px;
      text-align: center;
    }

    body {
      background-color: blue;
      font-family: Arial, sans-serif;
    }

    .flex {
      /* basic styling */
      width: 600px;
      height: 350px;
      border: 5px solid #555;
      margin: auto;

      /* flexbox setup */
      display: flex;
      flex-direction: column;
    }

    .flex > div {
      flex: 1 1 auto;
      height: 30px;

      transition: height 0.7s ease-out;

      /* texto */
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
    }

    /* colores */
    .flex > div:nth-child(1) { background: red; }
    .flex > div:nth-child(2) { background: yellow; }
    .flex > div:nth-child(3) { background: red; }

    .flex > div:hover {
      height: 200px;
    }